<template>
  <div 
    v-if="visible" 
    class="api-mode-indicator" 
    :class="{ 'mock': isMockMode, 'real': !isMockMode }"
    @click="toggleMode"
  >
    <div class="indicator-content">
      <el-icon class="indicator-icon">
        <component :is="isMockMode ? 'DataAnalysis' : 'Connection'" />
      </el-icon>
      <span class="indicator-text">{{ isMockMode ? '模拟数据模式' : '实际API模式' }}</span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import { Connection, DataAnalysis } from '@element-plus/icons-vue';
import { getUseMockData, setUseMockData } from '../../api/hybridApi';
import { ElMessage } from 'element-plus';

export default {
  name: 'ApiModeIndicator',
  components: {
    Connection,
    DataAnalysis
  },
  props: {
    // 是否显示指示器
    showIndicator: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const isMockMode = ref(true);
    const visible = ref(props.showIndicator);
    
    // 初始化时检查当前模式
    onMounted(() => {
      isMockMode.value = getUseMockData();
    });
    
    // 监听属性变化
    watch(() => props.showIndicator, (newVal) => {
      visible.value = newVal;
    });
    
    // 切换模式
    const toggleMode = () => {
      isMockMode.value = !isMockMode.value;
      setUseMockData(isMockMode.value);
      
      ElMessage({
        type: 'info',
        message: `已切换到${isMockMode.value ? '模拟数据模式' : '实际API模式'}`,
        duration: 1500
      });
    };
    
    return {
      isMockMode,
      visible,
      toggleMode
    };
  }
};
</script>

<style scoped>
.api-mode-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  opacity: 0.9;
  transition: all 0.3s ease;
  font-size: 12px;
}

.api-mode-indicator:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.api-mode-indicator.mock {
  background-color: #ecf5ff;
  border: 1px solid #a0cfff;
  color: #409EFF;
}

.api-mode-indicator.real {
  background-color: #f0f9eb;
  border: 1px solid #b3e19d;
  color: #67C23A;
}

.indicator-content {
  display: flex;
  align-items: center;
}

.indicator-icon {
  margin-right: 5px;
}

@media (max-width: 768px) {
  .api-mode-indicator {
    bottom: 10px;
    right: 10px;
    padding: 5px 8px;
  }
  
  .indicator-text {
    display: none;
  }
  
  .indicator-icon {
    margin-right: 0;
  }
}
</style>
